<template>
	<view>
		<view style="margin: 40rpx; 0">
			<u-steps :list="numList" :current="current" active-color="#D0B07F"></u-steps>
		</view>
		<view class="card-region">
			<view class="head-region">
				<image class="img" ></image>
				<view class="level">
					{{current == 0 ? 'V1' : current == 1 ? 'V2' : current == 2 ? 'V3' : current == 3 ? 'V4' : ''}}
				</view>
			</view>

			<view class="progress-region">
				<view class="consume" v-if="consumeList.card_type == 104  || consumeList.card_type == 101">上次升级后累计消费：{{consumeList.totalUpgradeSpending}}</view>
				<view style="font-size: 25rpx;" v-if="consumeList.card_type == 104 || consumeList.card_type == 101">距下次升级还需要消费 {{ consumeList.totalNextSpending }}</view>
				
				<view class="consume" v-if="consumeList.card_type != 104 && consumeList.card_type != 101">
					{{consumeList.expireDate}}前，到期 
					<u-icon name="error-circle" style="margin-left: 10rpx;"></u-icon>
				</view>

				<view style="margin: 0 30rpx;">
					<u-line-progress v-if="consumeList.card_type != 103" inactive-color="#fff" active-color="#D0B07F"
						:percent="consumeList.percentage" height="20" :striped="true"></u-line-progress>
					<view class="nextLevel" v-if="consumeList.card_type != 103">
						<view>{{consumeList.level_name}}</view>
						<view>{{consumeList.nextLeveName}}</view>
					</view>
				</view>
			</view>
		</view>

		<view style="position: relative;">
			<u-swiper :list="list" mode="none" :effect3d="true" :circular="false" :autoplay="false" height="350"
				:current="current" @change="onSwiperChange"></u-swiper>
		</view>

		<view class="rule-region">
			<view v-if="current == 1 " style=" border: 1px solid #D0B07F; padding: 15px; border-radius: 10px;">
				<text style="font-weight: bold; font-size: 18px;">金卡</text>
				<text style="display: block; margin-top: 10px;"> 今日消费 元，次日可升级红宝石会员;</text>
				<text style="display: block;">累计消费 元，可升级红宝石会员</text>
			</view>

			<view v-if="current == 2 " style=" border: 1px solid #D0B07F; padding: 15px; border-radius: 10px;">
				<text style="font-weight: bold; font-size: 18px;">红宝石卡</text>
				<text style="display: block; margin-top: 10px;">今日消费 元，次日可升级钻石会员;</text>
				<text style="display: block;">累计消费 元，可升级钻石会员</text>
				<text style="display: block;">消费 **元可保级红宝石会员</text>
			</view>

			<view v-if="current == 3 " style="border: 1px solid #D0B07F; padding: 15px; border-radius: 10px;">
				<text style="font-weight: bold; font-size: 18px;">钻石卡</text>
				<text style="display: block; margin-top: 10px;">消费 **元可保级钻石会员</text>
			</view>
		</view>
		
		<view>
			<u-grid :col="4" :border="false">
				<u-grid-item bg-color="#f2f2f2" v-for="(item, index) in equityList" :key="index"
					v-if="item.id.includes( (current +1).toString())" @click="popupEquity(item)">
					<u-icon :name="item.equityImg" :size="100"></u-icon>
					<view class="grid-text">{{ item.equityName }}</view>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view>
			<u-popup v-model="popupEquityShow" mode="center" :mask-close-able="false" border-radius="10" width="500rpx">
				<view class="equity">
					<u-icon :name="popupEquityData.equityImg" :size="100"></u-icon>
					<view class="equityName">{{popupEquityData.equityName}}</view>
					<rich-text :nodes="popupEquityData.equityContent"></rich-text>
				</view>
				<view class="colse" @click="closePopup">关闭</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				popupEquityData: {},
				popupEquityShow: false,
				equityList: [{
						id: ['4'],
						equityImg: '../../../static/logo.png',
						equityName: '生日积分',
						equityContent: `生日当月消费享2倍积分`
					},
					{
						id: ['1', '2', '3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '积分兑换',
						equityContent: '可享受积分兑换精美礼品'
					}, {
						id: ['1', '2', '3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '会员活动',
						equityContent: `会员专享定期活动`
					},
					{
						id: ['2', '3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '礼品包装',
						equityContent: `精品包装服务`
					},
					{
						id: ['3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '贵宾厅服务',
						equityContent: `每日每卡限免费入厅1次`
					},
					{
						id: ['1', '2', '3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '停车优惠',
						equityContent: ``
					}
				],
				current: 0,
				list: [{
						image: '../../../static/logo.png',
						title: '微会员'
					},
					{
						image: '../../../static/logo.png',
						title: '金卡'
					},
					{
						image: '../../../static/logo.png',
						title: '红宝石'
					},
					{
						image: '../../../static/logo.png',
						title: '钻石卡'
					}
				],
				numList: [{
					name: 'V1'
				}, {
					name: 'V2'
				}, {
					name: 'V3'
				}, {
					name: 'V4'
				}],

				consumeList: {
					card_type: '104',
					level_name: '微会员',
					expireDate: '9999-12-31',
					totalUpgradeSpending: 0,
					percentage: 0,
					nextLeveName: '金卡',
					totalNextToday: 0,
					totalNextSpending: 0
				}
			}
		},

		onLoad() {},
		methods: {
			onSwiperChange(event) {
				this.current = event; // 更新当前索引
			},
			// 权益弹窗关闭
			closePopup() {
				this.popupEquityShow = false
				uni.showTabBar()
			},
			// 权益弹窗打开
			popupEquity(item) {
				if (item.equityName == "停车优惠") {
					if (this.current == 0 || this.current == 1) {
						item.equityContent = `<p>当日消费满200元，<br/>
				<span>即可申领30元停车满减券</span></p>`
					} else if (this.current == 2) {
						item.equityContent = `<p>每月赠200元停车满减券</p>
				<br/>
				<p>当日消费满200元，<br/>
				<span>即可申领30元停车满减券</span></p>`
					} else if (this.current == 3) {
						item.equityContent = `<p>每月赠300元停车满减券</p>
				<br/>
				<p>当日消费满200元，<br/>
				<span>即可申领30元停车满减券</span></p>`
					}
				}
				this.popupEquityData = item
				this.popupEquityShow = true
				uni.hideTabBar()
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f2f2f2;
	}

	.card-region {
		.head-region {
			position: relative;
			text-align: center;

			.img {
				height: 180rpx;
				width: 180rpx;
				border-radius: 100%;
				border: 1px solid red;
			}

			.level {
				background-color: #D0B07F;
				color: #fff;
				border-radius: 100%;
				width: 40rpx;
				height: 40rpx;
				padding: 5rpx;
				font-size: 20rpx;
				position: absolute;
				left: 410rpx;
				top: 140rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.progress-region {
			text-align: center;
			display: flex;
			flex-direction: column;
			margin: 20rpx;

			.consume {
				font-size: 35rpx;
				font-weight: bold;
			}

			.nextLevel {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}
	}

	.rule-region {
		padding: 20rpx;
	}
	
	.equity {
		padding: 60rpx 60rpx 40rpx 60rpx;
		background-color: #fff;
		text-align: center;

		.equityName {
			font-size: 40upx;
			font-weight: bold;
			margin: 20upx;
		}
	}

	.colse {
		border-top: 1px solid #ebebeb;
		background-color: #fff;
		text-align: center;
		line-height: 80upx;
	}


</style>